<template>
		<div class="lilunbufen">
			<div class="title">
			<svg  width="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path fill="rgb(98, 210, 162)" d="M384 192v640l384-320.064z"></path></svg>
			<span>理论部分</span></div>
			<el-menu mode="horizontal" background-color="rgb(215, 251, 233)" active-text-color="rgb(98, 210, 162)"
				text-color="rgb(98, 210, 162)" router default-active="/knowledge/studyRequire">
				<el-menu-item  @click="isDiscussFun">学习要求</el-menu-item>
				<el-menu-item  @click="isAnsFun">重难点</el-menu-item>
				<el-menu-item  @click="isQuestionFun">学习内容</el-menu-item>
				<el-menu-item index="4">进度安排</el-menu-item>
				<el-menu-item index="5">前置知识</el-menu-item>
			</el-menu>
			<div class="card">
				<StudyContent v-if="isDiscuss"></StudyContent>
				<StudyRequire v-if="isQuestion"></StudyRequire>
				<KeyPoint v-if="isAns"></KeyPoint>
			</div>
		</div>
</template>

<script>
	import StudyContent from '../../views/student/学习内容.vue'
	import StudyRequire from '../../views/student/学习要求.vue'
	import KeyPoint from '../../views/student/重难点.vue'
	import {
		toRefs
	} from 'vue'
	export default {
		components:{
			StudyContent,
			StudyRequire,
			KeyPoint
		},
		data(){
			return{
			isAns:false,
			isQuestion:false,
			isDiscuss:true,
			}
		},
		methods:{
			isQuestionFun(){
				if(this.isQuestion){
					return;
				}
				this.isQuestion=true;
				this.isDiscuss=false;
				this.isAns=false;
			},
			isDiscussFun(){
				if(this.isDiscuss){
					return;
				}
				this.isDiscuss=true;
				this.isQuestion=false;
				this.isAns=false;
			},
			isAnsFun(){
				if(this.isAns){
					return;
				}
				this.isAns=true;
				this.isQuestion=false;
				this.isDiscuss=false;
			}
		}
	}
</script>

<style lang="less" scoped>
	.title{
		padding-left: 2%;
		width: 100%;
		display: flex;
		 justify-content: flex-start;
		 align-items: center;
	}
	.lilunbufen {
		background-color: #d7fbe9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.el-menu {
		display: flex;
		// display: -webkit-flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}

	// 去除菜单边框线
	.el-menu.el-menu--horizontal {
		border-bottom: #b4d7c5 solid 2px;
	}

	.is-active {
		border-bottom: 3px solid rgb(98, 210, 162);
	}

	.card {
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 2% 1% 2% 1%;
		width: 50%;
		border-radius: 15px;
		background-color: white;
		-webkit-box-shadow: #b4d7c5 0px 0px 10px;
		-moz-box-shadow: #b4d7c5 0px 0px 10px;
		box-shadow: #b4d7c5 0px 0px 10px;
	}
</style>
